---
layout: default
---
<!-- canvas-nest.min.js -->
<!-- <script type="text/javascript" src="../../../../js/canvas-nest.min.js"></script> -->

<!-- Post Header -->
{% include intro-header.html type='post' %}

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Post Container -->
            <div class="
                col-lg-9 col-lg-offset-1
                col-md-10 col-md-offset-1
                post-container">

                <!-- Multi-Lingual -->
                {% if page.multilingual %}
                <!-- Language Selector -->
                <select class="sel-lang" onchange="onLanChange(this.options[this.options.selectedIndex].value)">
                    <option value="0" selected> 中文 Chinese </option>
                    <option value="1"> 英文 English </option>
                </select>
                {% endif %}

                {{ content }}

                <!-- 打赏功能start -->
                <link href="/css/reward.css?v=6.2.0" rel="stylesheet" type="text/css" />
                <div>
                    <hr>
                    <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
                        <div id="wechat">
                            <p>如果你觉得这篇文章帮你节省了时间，增长了知识，请支持我写出更多这样的文章</p>
                        </div>
                        <br>
                        <button id="rewardButton" disable="enable"
                            onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
                            <span>打赏</span>
                        </button>
                        <div id="QR" style="display: none;">
                            <div id="wechat" style="display: inline-block">
                                <img id="wechat_qr" src="/img/reward/wechat.png" alt="白夜行的狼 微信支付" />
                                <p>微信支付</p>
                            </div>

                            <div id="alipay" style="display: inline-block">
                                <img id="alipay_qr" src="/img/reward/alipay.png" alt="白夜行的狼 支付宝" />
                                <p>支付宝</p>
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
                <!-- 打赏功能end -->

                <!-- 前后一篇文章start -->
                <hr style="visibility: hidden;">
                <ul class="pager">
                    {% if page.previous.url %}
                    <li class="previous">
                        <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}"
                            data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">
                            Previous<br>
                            <span>{{page.previous.title}}</span>
                        </a>
                    </li>
                    {% endif %}
                    {% if page.next.url %}
                    <li class="next">
                        <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip"
                            data-placement="top" title="{{page.next.title}}">
                            Next<br>
                            <span>{{page.next.title}}</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
                <hr style="visibility: hidden;">
                <hr>
                <!-- 前后一篇文章end -->


                <!--Gitalk评论start  -->
                {% if site.gitalk.enable %}
                <!-- 引入Gitalk评论插件  -->
                <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
                <script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
                <div id="gitalk-container"></div>
                <!-- 引入一个生产md5的js，用于对id值进行处理，防止其过长 -->
                <!-- Thank DF:https://github.com/NSDingFan/NSDingFan.github.io/issues/3#issuecomment-407496538 -->
                <script src="{{ site.baseurl }}/js/md5.min.js"></script>
                <script type="text/javascript">
                    var gitalk = new Gitalk({
                        clientID: '{{site.gitalk.clientID}}',
                        clientSecret: '{{site.gitalk.clientSecret}}',
                        repo: '{{site.gitalk.repo}}',
                        owner: '{{site.gitalk.owner}}',
                        admin: ['{{site.gitalk.admin}}'],
                        distractionFreeMode: '{{site.gitalk.distractionFreeMode}}',
                        id: md5(location.pathname),
                    });
                    gitalk.render('gitalk-container');
                </script>
                {% endif %}
                <!-- Gitalk end -->
            </div>

            <!-- Side Catalog Container -->
            {% if page.catalog %}
            <div class="
                    col-lg-2 col-lg-offset-0
                    visible-lg-block
                    sidebar-container
                    catalog-container">
                <div class="side-catalog">
                    <hr class="hidden-sm hidden-xs">
                    <h5>
                        <a class="catalog-toggle" href="#">CATALOG</a>
                    </h5>
                    <ul class="catalog-body"></ul>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</article>

<!-- add support for mathjax by HaoQChen-->
{% if page.enable-mathjax %}
{% include mathjax_support.html %}
{% endif %}



{% if site.anchorjs %}
<!-- async load function -->
<script>
    function async(u, c) {
        var d = document, t = 'script',
            o = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
        o.src = u;
        if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
        s.parentNode.insertBefore(o, s);
    }
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
    async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js", function () {
        anchors.options = {
            visible: 'always',
            placement: 'right',
            icon: ''
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })
</script>
<style>
    /* place left on bigger screen */
    @media all and (min-width: 800px) {
        .anchorjs-link {
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top: -0.1em;
        }
    }
</style>
{% endif %}